<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.picker.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/hotelList.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">酒店列表</h1>
		</header>
		<div class="tab-bar">
			<div class="tab-bar-item">智能排序
				<div style="transform: rotate(180deg);margin-left: 6px;">
					<img src="./images/trangleArrow.svg" alt="" />
				</div>
			</div>
			<div class="tab-bar-item">星级价格
				<div style="transform: rotate(180deg);margin-left: 6px;">
					<img src="./images/trangleArrow.svg" alt="" />
				</div>
			</div>
			<div class="tab-bar-item">区域位置
				<div style="transform: rotate(180deg);margin-left: 6px;">
					<img src="./images/trangleArrow.svg" alt="" />
				</div>
			</div>
		</div>
		<div onclick="blankClick()" class="tags-bar">
			<div class="tag-item">
				西安钟楼
			</div>
			<div class="tag-item">
				西安钟楼
			</div>
			<div class="tag-item">
				西安钟楼
			</div>
			<div class="tag-item">
				西安钟楼
			</div>
		</div>
		<div onclick="preferentialClick()" class="preferential-area" style="">
			<div class="preferential-left" style="">
				<div class="preferential-left-1" style="">优惠</div>
				<img class="flash-img" style="" src="./images/flash.png" alt="">
				<div class="preferential-left-2">红包￥100</div>
			</div>
			<img style="width: 8px;height: 12px" src="./images/redArrow.svg" alt="">
		</div>
		<div class="hotel-items-area">
			<div class="hotel-item">
				<img class="hotel-item-image" src="./images/hotelImg.svg" alt="">

				<div class="hotel-item-right">
					<div class="">
						<div class="hotel-name">美鹏·轻奢酒店（北京亚运村奥体中心店）</div>
						<div style="display: flex;align-items: center;">
							<div class="score">4.9</div>
							<div style="font-size: 15px;font-weight: 700;margin: 0 6px;">超好</div>
							<div style="font-size: 15px;color: #7F7F7F;">555条点评</div>
						</div>
						<div class="hotel-distance">距您直线10公里</div>
						<div class="hotel-distance">亚运村/奥体中心地区丨近北京联合大学</div>
						<div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
						</div>
					</div>
					<div class="hotel-item-right-bottom">
						<div class="price-bottom">
							<div class="before-price">￥229</div>
							<div class="real-price">￥150</div>
							<div style="color: #7F7F7F;font-size: 14px;">起</div>
						</div>
						<div class="price-bottom">
							<div class="tag-2">
								新人首单价
							</div>
							<div class="tag-2">
								四项优惠￥88
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hotel-item">
				<img class="hotel-item-image" src="./images/hotelImg.svg" alt="">

				<div class="hotel-item-right">
					<div class="">
						<div class="hotel-name">美鹏·轻奢酒店（北京亚运村奥体中心店）</div>
						<div style="display: flex;align-items: center;">
							<div class="score">4.9</div>
							<div style="font-size: 15px;font-weight: 700;margin: 0 6px;">超好</div>
							<div style="font-size: 15px;color: #7F7F7F;">555条点评</div>
						</div>
						<div class="hotel-distance">距您直线10公里</div>
						<div class="hotel-distance">亚运村/奥体中心地区丨近北京联合大学</div>
						<div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
						</div>
					</div>
					<div class="hotel-item-right-bottom">
						<div class="price-bottom">
							<div class="before-price">￥229</div>
							<div class="real-price">￥150</div>
							<div style="color: #7F7F7F;font-size: 14px;">起</div>
						</div>
						<div class="price-bottom">
							<div class="tag-2">
								新人首单价
							</div>
							<div class="tag-2">
								四项优惠￥88
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hotel-item">
				<img class="hotel-item-image" src="./images/hotelImg.svg" alt="">

				<div class="hotel-item-right">
					<div class="">
						<div class="hotel-name">美鹏·轻奢酒店（北京亚运村奥体中心店）</div>
						<div style="display: flex;align-items: center;">
							<div class="score">4.9</div>
							<div style="font-size: 15px;font-weight: 700;margin: 0 6px;">超好</div>
							<div style="font-size: 15px;color: #7F7F7F;">555条点评</div>
						</div>
						<div class="hotel-distance">距您直线10公里</div>
						<div class="hotel-distance">亚运村/奥体中心地区丨近北京联合大学</div>
						<div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
						</div>
					</div>
					<div class="hotel-item-right-bottom">
						<div class="price-bottom">
							<div class="before-price">￥229</div>
							<div class="real-price">￥150</div>
							<div style="color: #7F7F7F;font-size: 14px;">起</div>
						</div>
						<div class="price-bottom">
							<div class="tag-2">
								新人首单价
							</div>
							<div class="tag-2">
								四项优惠￥88
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hotel-item">
				<img class="hotel-item-image" src="./images/hotelImg.svg" alt="">

				<div class="hotel-item-right">
					<div class="">
						<div class="hotel-name">美鹏·轻奢酒店（北京亚运村奥体中心店）</div>
						<div style="display: flex;align-items: center;">
							<div class="score">4.9</div>
							<div style="font-size: 15px;font-weight: 700;margin: 0 6px;">超好</div>
							<div style="font-size: 15px;color: #7F7F7F;">555条点评</div>
						</div>
						<div class="hotel-distance">距您直线10公里</div>
						<div class="hotel-distance">亚运村/奥体中心地区丨近北京联合大学</div>
						<div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
						</div>
					</div>
					<div class="hotel-item-right-bottom">
						<div class="price-bottom">
							<div class="before-price">￥229</div>
							<div class="real-price">￥150</div>
							<div style="color: #7F7F7F;font-size: 14px;">起</div>
						</div>
						<div class="price-bottom">
							<div class="tag-2">
								新人首单价
							</div>
							<div class="tag-2">
								四项优惠￥88
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hotel-item">
				<img class="hotel-item-image" src="./images/hotelImg.svg" alt="">

				<div class="hotel-item-right">
					<div class="">
						<div class="hotel-name">美鹏·轻奢酒店（北京亚运村奥体中心店）</div>
						<div style="display: flex;align-items: center;">
							<div class="score">4.9</div>
							<div style="font-size: 15px;font-weight: 700;margin: 0 6px;">超好</div>
							<div style="font-size: 15px;color: #7F7F7F;">555条点评</div>
						</div>
						<div class="hotel-distance">距您直线10公里</div>
						<div class="hotel-distance">亚运村/奥体中心地区丨近北京联合大学</div>
						<div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
						</div>
					</div>
					<div class="hotel-item-right-bottom">
						<div class="price-bottom">
							<div class="before-price">￥229</div>
							<div class="real-price">￥150</div>
							<div style="color: #7F7F7F;font-size: 14px;">起</div>
						</div>
						<div class="price-bottom">
							<div class="tag-2">
								新人首单价
							</div>
							<div class="tag-2">
								四项优惠￥88
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hotel-item">
				<img class="hotel-item-image" src="./images/hotelImg.svg" alt="">

				<div class="hotel-item-right">
					<div class="">
						<div class="hotel-name">美鹏·轻奢酒店（北京亚运村奥体中心店）</div>
						<div style="display: flex;align-items: center;">
							<div class="score">4.9</div>
							<div style="font-size: 15px;font-weight: 700;margin: 0 6px;">超好</div>
							<div style="font-size: 15px;color: #7F7F7F;">555条点评</div>
						</div>
						<div class="hotel-distance">距您直线10公里</div>
						<div class="hotel-distance">亚运村/奥体中心地区丨近北京联合大学</div>
						<div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
							<div class="tag-1">分期支付</div>
						</div>
					</div>
					<div class="hotel-item-right-bottom">
						<div class="price-bottom">
							<div class="before-price">￥229</div>
							<div class="real-price">￥150</div>
							<div style="color: #7F7F7F;font-size: 14px;">起</div>
						</div>
						<div class="price-bottom">
							<div class="tag-2">
								新人首单价
							</div>
							<div class="tag-2">
								四项优惠￥88
							</div>
						</div>
					</div>
				</div>
			</div>


		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			// $('.tab-bar').on('click', '.tab-bar-item', function() {
			// 	// 这里的 this 指向被点击的子集 div
			// 	// 在这里执行子集 div 被点击时的操作
			// 	alert('Child clicked: ' + $(this).text());
			// });
			$('.tab-bar').children().on('click', function() {
				// 这里执行点击父级 div 时的操作
				alert('Child clicked: ');
			});
			function blankClick(){
				alert('tags click')
			}


			function preferentialClick() {
				alert('优惠点击')
			}

			mui.init()
		</script>
	</body>

</html>
